import React from "react";
import {StyleSheet, Switch, Text, View} from "react-native";

type SwitchFormProp = {
    startText:string
    defaultValue?:boolean
    onChangeSwitch:(on:boolean)=>void
}

type SwitchFormState = {
    on:boolean
}

export default class SwitchForm extends React.Component<SwitchFormProp, SwitchFormState> {
    constructor(props:any) {
        super(props);

        this.state = {
            on:this.props.defaultValue || false
        }
    }

    render() {
        return (
            <View>
                <View style={switchFormStyles.container}>
                    <View style={switchFormStyles.startTextContainer}><Text style={switchFormStyles.startText}>{this.props.startText}</Text></View>
                    <View style={switchFormStyles.switchContainer}>
                        <View style={{flex:1, height:40}} />
                        <Switch  style={switchFormStyles.switch} value={this.state.on}   onValueChange={(v)=>{this.setState({on:v});this.props.onChangeSwitch(v)}}/>
                    </View>
                </View>
            </View>
        )
    }
}


const switchFormStyles = StyleSheet.create({
    container:{
        flexDirection:'row',
        marginTop:4,
        marginBottom:4
    },
    startTextContainer:{
        flexDirection:'row',
        width:92,
        height:40,
        justifyContent:'flex-end',
        alignItems:'center'
    },
    startText:{
        marginRight:4,
        textAlign:'right'
    },
    switchContainer:{
        flexDirection:'row',
        flex:1,
        height:40,
        justifyContent:'flex-end',
        alignItems:'center'
    },
    picketContainer:{
        flexDirection:'row',
        width:92,
        height:40,
        justifyContent:'flex-end',
        alignItems:'center'
    },
    switch:{
        marginRight:4
    },

});
